:root {
  /*--vp-c-brand: #646cff;*/
  /*--vp-c-brand-light: #747bff;*/
  /*--vp-c-brand-lighter: #9499ff;*/
  /*--vp-c-brand-lightest: #bcc0ff;*/
  /*--vp-c-brand-dark: #535bf2;*/
  /*--vp-c-brand-darker: #454ce1;*/
  --demoblock-border: rgba(60, 60, 60, 0.12);
  --demoblock-control: #d3dce6;
  --demoblock-control-bg: var(--vp-c-bg);
  --demoblock-control-bg-hover: #f9fafc;
  --demoblock-description-bg: var(--vp-c-bg, #ffffff);
}

html.dark {
  --demoblock-control: #8b9eb0;
  --demoblock-control-bg-hover: var(--vp-c-bg);
  --demoblock-description-bg: var(--vp-code-bg-color, #1a1a1a);
  --demoblock-border: rgba(84, 84, 84, 0.48);
}

/* icon-caret */
.icon-caret-down {
  width: 16px;
  height: 100%;
  position: relative;
}

.icon-caret-down::before {
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top: 7.5px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  margin-left: -6px;
}

.icon-caret-up {
  width: 16px;
  height: 100%;
  position: relative;
}

.icon-caret-up::before {
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom: 7px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8.5px;
  margin-left: -6px;
}
